<template>
  <div class="my-submissions">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>我的提交记录</span>
        </div>
      </template>
      
      <el-table 
        v-loading="loading"
        :data="submissions"
        style="width: 100%"
      >
        <el-table-column
          prop="title"
          label="问卷标题"
          min-width="200"
        />
        <el-table-column
          prop="description"
          label="问卷描述"
          min-width="300"
        />
        <el-table-column
          prop="submitTime"
          label="提交时间"
          width="180"
        >
          <template #default="scope">
            {{ formatDateTime(scope.row.submitTime) }}
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          width="200"
          fixed="right"
        >
          <template #default="scope">
            <el-button 
              type="primary" 
              link
              @click="viewDetail(scope.row)"
            >
              查看答案
            </el-button>
            <el-button 
              type="success" 
              link
              @click="viewQuestionnaire(scope.row)"
            >
              查看问卷
            </el-button>
            <el-button 
              type="warning" 
              link
              @click="resubmit(scope.row)"
            >
              重新提交
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 详情对话框 -->
    <el-dialog
      v-model="dialogVisible"
      title="提交详情"
      width="60%"
    >
      <div v-loading="detailLoading">
        <div v-if="submissionDetail">
          <h3>{{ submissionDetail.questionnaire.title }}</h3>
          <p class="description">{{ submissionDetail.questionnaire.description }}</p>
          <div class="answers">
            <div v-for="(value, key) in parseAnswers(submissionDetail.answers)" :key="key">
              <p>
                <strong>问题 {{ key }}:</strong>
                <template v-if="Array.isArray(value)">
                  {{ value.join(', ') }}
                </template>
                <template v-else>
                  {{ value }}
                </template>
              </p>
            </div>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { getMySubmissions, getSubmission } from '@/api/questionnaire'
import { formatDateTime } from '@/utils/format'

const router = useRouter()
const loading = ref(false)
const submissions = ref([])
const dialogVisible = ref(false)
const detailLoading = ref(false)
const submissionDetail = ref(null)

// 加载提交记录
const loadSubmissions = async () => {
  loading.value = true
  try {
    const res = await getMySubmissions()
    if (res.code === 200) {
      submissions.value = res.data
    }
  } catch (error) {
    console.error('加载提交记录失败:', error)
    ElMessage.error('加载提交记录失败')
  } finally {
    loading.value = false
  }
}

// 查看详情
const viewDetail = async (row) => {
  dialogVisible.value = true
  detailLoading.value = true
  try {
    const res = await getSubmission(row.questionnaireId)  // 使用 questionnaireId 而不是 id
    if (res.code === 200) {
      submissionDetail.value = res.data
    } else {
      ElMessage.error(res.message || '获取提交详情失败')
    }
  } catch (error) {
    console.error('获取提交详情失败:', error)
    ElMessage.error('获取提交详情失败')
  } finally {
    detailLoading.value = false
  }
}

// 解析答案
const parseAnswers = (answers) => {
  try {
    return typeof answers === 'string' ? JSON.parse(answers) : answers
  } catch (e) {
    console.error('解析答案失败:', e)
    return {}
  }
}

// 查看问卷
const viewQuestionnaire = (row) => {
  router.push(`/questionnaire/detail/${row.id}`)
}

// 重新提交
const resubmit = (row) => {
  router.push(`/questionnaire/submit/${row.id}`)
}

onMounted(() => {
  loadSubmissions()
})
</script>

<style scoped>
.my-submissions {
  padding: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.description {
  color: #666;
  margin: 10px 0 20px;
}

.answers {
  margin-top: 20px;
  line-height: 1.8;
}

.answers p {
  margin: 10px 0;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.answers strong {
  margin-right: 10px;
  color: #333;
}

/* 添加按钮间距 */
.el-button + .el-button {
  margin-left: 8px;
}

/* 确保操作列按钮在一行显示 */
:deep(.el-table .cell) {
  white-space: nowrap;
}
</style> 